<template>
  <div>
    <!-- 教程中心 -->
    <div class="produc new">
      <div class="produc-banner"></div>
      <div class="container flex-between m40">
        <div class="navigation">
                    <div class="navigation-heard">教程中心</div>
                    <ul>
                        <li class="atv">全部教程</li>
                    </ul>
        </div>
        <div class="voyage">
           <div class="voyage-header flex-between">
              <span>全部教程</span>
          </div>
          <el-skeleton :rows="30" animated  v-if=" querybytype.length<=0" />
          <div v-for="(item, i) in querybytype" :key="i" class="voyage-box flex-between">
          <div class="voyage-box-img">
                <router-link target="_blank"  :to="{path:'/details',query: {id: item.id}}">
                    <img class="news-notice-title" :src="item.img">
                </router-link>
          </div>
          <div class="voyage-box-info">
             <h2 class="notice-title">
                <router-link target="_blank" :to="{path:'/details',query: {id: item.id}}">
                {{ item.title }}
                </router-link>
                </h2>
              <div class="infor-box">
                  <p class="infor" v-html="item.simpleTxt" ></p>
              </div>
            <p class="time flex-between">
               <span>发布时间：{{item.addTime}}</span>
              <router-link target="_blank"  class="lookbut" :to="{path:'/details',query: {id: item.id}}"> 查看详情 </router-link>
            </p>
          </div>
        </div>
        </div>
        

        <!----------------end------------------------------------->
      </div>
    </div>
  </div>
</template>

<script>
import api from "../api/index";
export default {
  name: "tutorial",
  data() {
    return {
      querybytype: "",
    };
  },

  mounted() {
    api.querybytype({ type: 10 }).then((res) => {
 
      this.querybytype = res.data.data.list;
    });
  },
  methods: {
    change(e) {
      this.$router.push({ path: "/details", query: { id: e } });
    },
  },
};
</script>
